<style>
    .modal_member{ }
    .modal_memberbox{background:#FFF; padding:10px 20px}
    .modal_membertop{ padding:15px 0; border-bottom:1px solid #CCC; margin-bottom:15px;}
    .secrchinput{margin-top:0.5em;margin-left:1em;vertical-align:-10px;float:right;border:1px solid #c4c4c4;position:relative;overflow:hidden;border-radius:15px;width:215px;height:30px;margin-right:8px; background:#FFF;}
    .secrchinput input{border:none;}
    .secrchinput button{ background:none; border:none; padding:5px 8px;color:#5FB878}
    .panelbox-head a{ display:inline-block; margin-right:10px;}
    .modal_memberinfobox{border-radius:4px; padding:10px;height:138px;}
    .modal_memberinfobox h2{ text-align:center; color:#ff5400; font-size:26px; height:60px; line-height:60px;}
    .modal_member .panelbox{margin-bottom:15px;}
    .modal_memberinfobox b{ color:#F50;}
</style>
<div class="modal_member" style="display:none">
    <div class="modal_memberbox">
        <div class="modal_membertop">
            <button class="layui-btn" type="button">会员管理</button>
            <div class="secrchinput">
                <form action="" method="post" class="layui-form" onsubmit="return false;" id="topsearchform" enctype="multipart/form-data">
                    <button type="submit" onclick="funExtend_memberList(1)"><i class="fa fa-search"></i></button>
                    <input type="text" name="modal_member_txtTopupSeachStr" id="modal_member_txtTopupSeachStr" placeholder="输入手机号码/卡号/姓名">
                </form>
            </div>
        </div>
        <div class="panelbox">
            <div class="panelbox-head"> <A href="JavaScript:" class="btn btn-default btn-sm" onclick="funExtend_memberEdit(0)"><i class="fa fa-plus"></i> 新增</A> 注意：如开启通用余额，列表中的余额将有可能不准确，请点击编辑会员查看余额。</div>
            </div>
        </div>
        <div class="panelbox" style="margin-bottom:0; border: none">
            <div class="panelbox-body" style="padding: 0 15px; border: none">
                <div class="layui-form" style="height:290px;">
                    <table class="layui-table" lay-skin="line">
                        <thead>
                        <tr>
                            <th style="width:120px">卡号</th>
                            <th style="width:110px">姓名</th>
                            <th style="width:110px">电话</th>
                            <th>等级</th>
                            <th>积分</th>
                            <th>余额</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="memberlist">

                        </tbody>

                    </table>
                </div>
            </div>
            <div class="panelbox-foot text-right" style="padding:0 15px; border: none">
                <div id="memberlistpageindex"></div>
            </div>
            </form>
        </div>
    </div>
</div>

<!---->
<style>
    .layui-form-label{ width:80px; padding-left:0; padding-right:0;}
    .layui-input-block{margin-left: 100px;}
</style>
<div id="modal_memberEdit" style="display:none;">
    <form id="modal_memberEditform" class="layui-form" action="" style="padding:15px">
        <input type="hidden" name="modal_memberEdit_id" id="modal_memberEdit_id" />
        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">*会员卡号</label>
                    <div class="layui-input-block">
                        <input type="text" name="mmEdit_cardno" lay-verify="number" autocomplete="off" placeholder="会员卡号" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <select name="mmEdit_gid" lay-verify="required" lay-ignore class="form-control">
                    <option value="0" selected>会员等级</option>
                    {loop mc_groups() $row}
                    <option value="{$row['groupid']}">{$row['title']}</option>
                    {/loop}
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">会员姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="mmEdit_realname" autocomplete="off" placeholder="会员姓名" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="mmEdit_mobile" lay-verify="phone" autocomplete="off" placeholder="手机号码" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">会员称谓</label>
                    <div class="layui-input-block">
                        <input type="radio" name="mmEdit_sex" value="0" title="保密" checked/>
                        <input type="radio" name="mmEdit_sex" value="2" title="女士"/>
                        <input type="radio" name="mmEdit_sex" value="1" title="先生"/>
                    </div>
                </div>
            </div>
            <div class="col-md-6" id="goodstatus">
                <label class="layui-form-label">会员生日</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="会员生日" name="mmEdit_birdday" id="LAY_demorange_s">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">微信会员卡</label>
                    <div class="layui-input-block">
                        <div class="input-group">
                            <input type="text" name="mmEdit_wxcardno" autocomplete="off" placeholder="微信会员卡卡号" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" onclick="fun_searchWxmember()" type="button">获取</button>
      </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">

            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">积分</label>
                    <div class="layui-input-block">
                        <input type="text" name="mmEdit_credit" readonly autocomplete="off" placeholder="积分" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">余额</label>
                    <div class="layui-input-block">
                        <input type="text" name="mmEdit_cash" readonly  autocomplete="off" placeholder="余额" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">标签</label>
                    <div class="layui-input-block">
                        <input type="text" name="label" autocomplete="off" placeholder="标签" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">过期时间</label>
                    <div class="layui-input-block">
                        <input class="layui-input" placeholder="过期时间" name="mmEdit_endtime" id="LAY_demorange_e">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="mmEdit_remark" autocomplete="off" placeholder="50字内" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block" style="font-size:10px;">
                        <input type="radio" name="mmEdit_status" value="0" title="停用"/>
                        <input type="radio" name="mmEdit_status" value="1" title="启用" checked/>
                        <input type="radio" name="mmEdit_status" value="2" title="挂失"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12"><Div class="pull-right"> <button class="layui-btn" lay-submit="" lay-filter="modal_memberbtnsubmit">保存</button></Div></Div>
        </div>
    </form>
</div>
<div class="wxcardouterbox" style="display: none;">
    <div class="wxcardbox" style="padding:10px;"></div>
</div>

<script language="JavaScript">
    function fun_searchWxmember(){
        var wxcard=$("input[name='mmEdit_wxcardno']").val();
        if(wxcard.length<8)return;
        var index2=layer.load(1, {shade: [0.1,'#fff']});
        $.post("{php echo $this->createMobileUrl('member',array('op'=>'searchwxmember'))}",{wxcard:wxcard},function(returnstr){
            layer.close(index2);
            console.log(returnstr);
            var result=eval("("+returnstr+")");
            if(result.success){
                var cardinfo=result.cardinfo;
                layer.open({
                    type: 1,
                    title: "微信会员卡资料",
                    skin: 'layui-layer-rim',
                    shade:0,
                    btn:["关闭"],
                    yes: function(index, layero){
                        layer.close(index);
                    },
                    area:"400px",
                    content: $(".wxcardouterbox").show(),
                    success: function (layero, index) {
                        $(".wxcardbox").empty();
                        for(var i in cardinfo){
                            var temp='<div class="input-group"><span class="input-group-addon">'+i+'</span><input type="text" class="form-control" value="'+cardinfo[i]+'" readonly><span class="input-group-btn"><button class="btn btn-default copybtn'+i+' " onclick="fun_copy(\''+i+'\',\''+cardinfo[i]+'\')" type="button">复制</button></span></div>';
                            $(".wxcardbox").append(temp);
                        }
                    },
                    end:function(){
                        $(".wxcardouterbox").hide();
                    }
                });
            }else{
                layer.msg(result.msg,{icon:2,time:1000});
                return false;
            }

        });
    }
    function fun_copy(key,txt){
        var clipboard = new Clipboard('.copybtn'+key, {
            text: function() {
                return txt;
            }
        });
        clipboard.on('success', function(e) {
            layer.msg("已复制到粘贴板",{icon:1,time:800});
        });
        clipboard.on('error', function(e) {
            layer.msg("复制错误："+e,{icon:1,time:800});
        });
    }
    function funExtend_member(){
        var _height=$(window).height()*0.8;
        var _width=$(document).width()*0.8;
        layer.open({
            type: 1,
            title:0,
            area:[_width+"px",_height+"px"],
            skin: 'layui-layer-rim',
            content:$(".modal_member").show(),
            success: function(layero, index){
                var index2=layer.load(1, {shade: [0.1,'#fff']});
                $.post("{php echo $this->createMobileUrl('member',array('op'=>'getallmember'))}",{},function(returnstr){
                    layer.close(index2);
                    console.log(returnstr);
                    var result=eval("("+returnstr+")");
                    if(!result.success){
                        layer.msg(result.msg,{icon:2,time:1000});
                        return false;
                    }
                    $("#m_member_Txt_1").text(result.num1);
                    $("#m_member_Txt_2").text(result.num2);
                    $("#m_member_Txt_3").text(result.num3);
                    $("#m_member_Txt_4").text(result.num4);
                    $("#m_member_Txt_5").text(result.num5);
                    $("#m_member_Txt_6").text(result.num6);
                    $("#m_member_Txt_7").text((parseFloat(result.num5)/parseFloat(result.num6)).toFixed(2));
                    $("#m_member_Txt_8").text(result.num7);
                    funExtend_memberList(1);
                    return false;
                });
            },
            end:function(){
                $(".modal_member").hide();
            }
        });
    }
    function funExtend_memberList(pindex){
        var index2=layer.load(1, {shade: [0.1,'#fff']});
        var keyword=$("#modal_member_txtTopupSeachStr").val();
        $.post("{php echo $this->createMobileUrl('member',array('op'=>'getmemberpage'))}",{"page":pindex,"keyword":keyword},function(returnstr){
            layer.close(index2);
            console.log(returnstr);
            $("#memberlist").empty();
            var result=eval("("+returnstr+")");
            if(!result.success){
                layer.msg(result.msg,{icon:2,time:1000});
                return;
            }
            //alert(result.total);
            if(pindex==1){
                layui.use(['laypage'], function(){
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'memberlistpageindex'
                        ,count: result.total
                        ,limit: 5
                        ,jump: function(obj, first){
                            var curr = obj.curr;
                            if(!first){
                                funExtend_memberList(curr);
                                return;
                            }
                        }
                    });
                });
            }
            var list=result.list;
            var temp="";
            for(var i in list){
                temp+='<tr mid="'+list[i].id+'"><td>'+list[i].cardno+'</td><td>'+list[i].realname+'</td><td>'+list[i].mobile+'</td><td>'+list[i].level+'</td><td>'+list[i].credit+'</td><td>'+list[i].cash+'</td><td>';
                switch(parseInt(list[i].status)){
                    case 0:
                        temp+='<span class="label label-default">未启用</span>';
                        break;
                    case 1:
                        temp+='<span class="label label-success">启用</span>';
                        break;
                    case 2:
                        temp+='<span class="label label-danger">挂失</span>';
                        break;
                }
                temp+='</td>';
                temp+='<td><a href="javascript:funExtend_memberEdit('+list[i].id+')" class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe642;</i></a>';
                if(list[i].openid && !list[i].wxcardno){
                    temp+='<a href="javascript:funExtend_memberReview('+list[i].id+')" class="layui-btn layui-btn-warm layui-btn-small"><i class="layui-icon">&#xe6c6;</i></a>';
                }
                temp+='</td></tr>';
            }

            $("#memberlist").html(temp);
            $("#memberlist tr").on("mouseover",function(){
                $(this).css("background-color","#DDD");
            }).on("mouseout",function(){
                $(this).css("background-color","#FFF");
            })
        });
    }
    function funExtend_memberEdit(id){
        var til= id==0 ? "新增会员":"修改会员";
        layer.open({
            type: 1,
            title:til,
            area:'780px',
            skin: 'layui-layer-rim',
            content:$("#modal_memberEdit").show(),
            success: function(layero, index){
                $("#modal_memberEditform")[0].reset();
                $("#modal_memberEditform").attr("index",index);
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    var myDate = new Date();
                    var datenow=myDate.toLocaleDateString();
                    laydate.render({
                        elem: '#LAY_demorange_s'
                        ,min: '1960-01-01'
                        ,max: datenow.replace("/","-")
                    });
                });
                $("input[name='modal_memberEdit_id']").val(id);
                if(id){
                    var index2=layer.load(1, {shade: [0.5,'#fff']});
                    $.post("{php echo $this->createMobileUrl('member',array('op'=>'getmember'))}",{"id":id},function(data){
                        layer.close(index2);
                        console.log(data);
                        if(id){
                            var items=data.item;

                            $("select[name='mmEdit_gid']").val(items.gid);
                            $("input[name='mmEdit_cardno']").val(items.cardno);
                            $("input[name='mmEdit_realname']").val(items.realname);
                            $("input[name='mmEdit_mobile']").val(items.mobile);
                            $("input[name='mmEdit_birdday']").val(items.birdday);
                            $("input[name='mmEdit_endtime']").val(items.endtime);
                            $("input[name='mmEdit_wxcardno']").val(items.wxcardno);
                            $("input[name='mmEdit_credit']").val(items.credit2);
                            $("input[name='mmEdit_cash']").val(items.cash2);
                            $("input[name='mmEdit_label']").val(items.label);
                            $("input[name='mmEdit_remark']").val(items.remark);
                            $("input[name='mmEdit_sex'][value="+items.sex+"]").attr("checked",true);
                            $("input[name='mmEdit_status'][value="+items.status+"]").attr("checked",true);
                            layui.use(['form'], function(){
                                form = layui.form;
                                form.render();
                            });
                        }
                    },'json');
                }
            },
            end:function(){
                $("#modal_memberEdit").hide();
                $("#modal_memberEditform")[0].reset();
            }
        });
    }

    function funExtend_memberReview(id){
        layer.confirm('确认激活会员卡？', {
            btn: ['确认','取消']
        }, function(){
            var index2=layer.load(1, {shade: [0.1,'#fff']});
            $.post("{php echo $this->createMobileUrl('member',array('op'=>'reviewmember'))}",{id:id},function(returnstr){
                layer.close(index2);
                console.log(returnstr);
                var result=eval("("+returnstr+")");
                if(result.success){
                    layer.msg("激活成功",{icon:1,time:2000},function(){
                        funExtend_memberList(1);
                    });
                }else{
                    layer.msg(result.msg,{icon:2,time:2000});
                    return;
                }
            })
        });
    }
    layui.use(['form'], function(){
        form = layui.form;
        form.on('submit(modal_memberbtnsubmit)', function(data){
            var index2=layer.load(1, {shade: [0.5,'#fff']});
            $.post("{php echo $this->createMobileUrl('member',array('op'=>'postmember'))}",data.field,function(returnstr){
                layer.close(index2);
                console.log(returnstr);
                var result=eval("("+returnstr+")");
                if(result.success){
                    var index=$("#modal_memberEditform").attr("index");
                    layer.close(index);
                    layer.msg("处理成功",{icon:1,time:1500},function(){
                        if(data.field.mmEdit_id){
                            var pageindex=$(".layui-laypage-curr").text();
                            funExtend_memberList(pageindex);
                        }else{
                            funExtend_memberList(1);
                        }
                    });
                }else{
                    layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
                    return;
                }

            });
            return false;
        });
    });
</script>